<template>
    <!-- 订单详情页 -->
    <view class="page_main">
        <HeaderBar title="订单详情"></HeaderBar>
        <view class="container">
           <!-- <scroll-view scroll-y> -->
            <view class="header">
                <view class="status">
                    <wd-icon :name="statusIcon" size="22px"></wd-icon>
                    {{ statusLabel }}
                </view>
                <!-- 动态提示信息 -->
                <view class="header_r" v-show="shouldShowTips">
                    <!-- 退款提示 -->
                    <text v-if="isRefunded" class="tip">退款已退回原支付方</text>
                    <!-- 倒计时 -->
                    <view v-if="isPendingPayment" class="time">
                        <view class="remain" v-if="remainingTime > 0">
                            剩余：<wd-count-down :time="remainingTime" format="mm:ss" />
                        </view>
                        <view v-else>倒计时已结束</view>    
                    </view>   
                    <!-- 退款详情入口 -->
                    <!-- <view v-if="showRefundDetail" class="refund_entry" @click="toRefundDetail"> -->
                    <view class="refund_entry" @click="toRefundDetail">
                        退款详情
                        <wd-icon name="chevron-right" size="18px"></wd-icon>
                    </view>
                </view>
            </view>
            <!-- 商品信息 -->
            <view class="goods">
                <img class="img" :src="goodsInfo.headImgUrl" alt="">
                <view class="goods_info">
                    <view class="info">
                        <view>{{ goodsInfo.productInformation?.thaliName}}</view>
                        <view>￥{{(goodsInfo.productInformation?.adultPrice * goodsInfo.productInformation?.adultNum 
                            + goodsInfo.productInformation?.childrenPrice * goodsInfo.productInformation?.childrenNum)
                            .toFixed(2)}}</view>    
                    </view>
                    <view class="count">
                        <view><text v-if="goodsInfo.productInformation?.adultNum">成人{{goodsInfo.productInformation.adultNum}}人</text><text v-if="goodsInfo.productInformation?.childrenNum">儿童{{goodsInfo.productInformation.childrenNum}}人</text></view>
                        <view>×{{goodsInfo.productInformation?.buyNum}}</view>   
                    </view>
                    <view class="memo">{{ goodsInfo.productInformation?.thaliMemo }}</view>
                    <view class="date"> 出发日期：{{goodsInfo.productInformation?.useDate}}</view>        
                </view>  
            </view> 
            <!-- 商户信息 -->
            <view class="merchant">
                <view class="merchant_info">
                    <view class="title">{{ merchantObj.name }}</view>
                    <view class="text">{{merchantObj.name}}</view>
                    <view class="tag">{{merchantObj.createTime}}年入驻</view>     
                </view>
                <view class="contact">
                    <view class="item" @click="enterStore">
                        <uni-icons type="shop" color="#1b9c61" size="24"></uni-icons>
                        <text>进入店铺</text>
                    </view>
                    <view class="item" @click="handleCallPhone">
                        <uni-icons type="phone" color="#1b9c61" size="24"></uni-icons>
                        <text>电话</text>
                    </view>     
                </view>    
            </view>
            <!-- 价格明细 -->
            <view class="price_breakdown">
                <view class="title">价格明细</view>
                <view class="item">
                    <view class="label">
                        商品总价
                        <view class="count">
                            共{{ goodsInfo.productInformation?.buyNum }}份
                        </view> 
                    </view>
                    <view class="price">￥<text>{{ orderDetails?.totalAmount?.toFixed(2) }}</text></view>  
                </view>
                <view class="item">
                    <view class="label">优惠金额</view>
                    <view class="price price_m">减￥<text>{{ orderDetails?.discountAmount?.toFixed(2) }}</text></view>  
                </view>
                <view class="item">
                    <view class="label">实付金额</view>
                    <view class="price">￥<text>{{ orderDetails?.payAmount?.toFixed(2) }}</text></view>  
                </view>    
            </view>
            <!-- 出行人信息 -->
            <wd-collapse viewmore v-model="collapseRoot" @change="handleChange" :line-num="3"  use-more-slot custom-more-slot-class="more-slot">
                <view class="title">出行人信息（<text v-if="adultCount">{{ adultCount }}成人</text><text v-if="childrenCount">{{ childrenCount }}儿童</text>）</view>  
                <!-- <template v-for="(type, index) in travelerTypes" :key="index">
                    <view class="list" v-if="filteredTravelers(type.value).length > 0">
                        <view class="label">{{ type.label }}</view>
                        <view class="info">
                            <view class="item" v-for="(item, idx) in filteredTravelers(type.value)" :key="idx">
                                <view class="text">
                                    姓名：{{ item.name }}<text v-if="item.refundStatus !== undefined" 
                                        class="tag">{{ refundStatusMap[item.refundStatus] }}</text>
                                </view>
                                <view class="text">
                                    身份证号：{{ item.showFull ? item.idCard : maskIdCard(item.idCard) }}
                                    <uni-icons :type="item.showFull?'eye':'eye-slash'" size="18" 
                                        @click="toggleShowIdCard(item)"/>
                                </view>
                            </view>
                        </view>
                    </view>
                </template> -->
                <!-- 成人列表 -->
                <view class="list" v-if="adultCount > 0">
                    <view class="label">成人</view>
                    <view class="info">
                        <view class="item" v-for="(item, idx) in goodsInfo.adultTravelers" :key="idx">
                            <view class="text">
                                姓名：{{ item.name }}
                                <text v-if="item.refundStatus !== undefined" class="tag">
                                    {{ refundStatusMap[item.refundStatus] }}
                                </text>
                            </view>
                            <view class="text">
                                身份证号：{{ item.showFull ? item.idCard : maskIdCard(item.idCard) }}
                                <uni-icons :type="item.showFull?'eye':'eye-slash'" size="18" 
                                        @click="toggleShowIdCard(item)"/>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 儿童列表 -->
                <view class="list" v-if="childrenCount > 0">
                    <view class="label">儿童</view>
                    <view class="info">
                        <view class="item" v-for="(item, idx) in goodsInfo.childrenTravelers" :key="idx">
                            <view class="text">
                                姓名：{{ item.name }}
                                <text v-if="item.refundStatus !== undefined" class="tag">
                                    {{ refundStatusMap[item.refundStatus] }}
                                </text>
                            </view>
                            <view class="text">
                                身份证号：{{ item.showFull ? item.idCard : maskIdCard(item.idCard) }}
                                <uni-icons :type="item.showFull?'eye':'eye-slash'" size="18" 
                                        @click="toggleShowIdCard(item)"/>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="list tel">
                    <view class="label">联系方式</view>
                    <view class="phone">{{ goodsInfo.contactPhone }}</view>
                </view>
                <template class="more" #more>
                    <view class="more_i" v-if="!collapseRoot">查看更多<uni-icons type="down" size="18"></uni-icons></view>
                    <view class="more_i" v-else>点击收起<uni-icons type="up" size="18"></uni-icons></view>
                </template>
            </wd-collapse>
            <!-- 订单信息 -->
            <wd-collapse viewmore v-model="orderCollapseRoot" @change="orderHandleChange" :line-num="4"  use-more-slot custom-more-slot-class="more-slot">
                <view class="title">订单信息</view>  
                <view class="order_list">
                    <view class="order_label">订单编号</view>
                    <view class="info">{{ orderDetails?.id }}<text class="copy" @click="copyOrderNumber">复制</text></view>
                </view>
                <view class="order_list">
                    <view class="order_label">手机号码</view>
                    <view class="info">{{ goodsInfo?.contactPhone ||'--'}}</view>
                </view>
                <view class="order_list">
                    <view class="order_label">使用日期</view>
                    <view class="info">{{ goodsInfo?.useDate ||'--'}}</view>
                </view>
                <view class="order_list">
                    <view class="order_label">下单时间</view>
                    <view class="info">{{ orderDetails?.createTime ||'--'}}</view>
                </view>
                <view class="order_list" v-if="!isPendingPayment">
                    <view class="order_label">支付时间</view>
                    <view class="info">{{ orderDetails?.payTime ||'--'}}</view>
                </view>
                <view class="order_list" v-if="!isPendingPayment">
                    <view class="order_label">支付流水号</view>
                    <view class="info">{{ orderDetails?.paySerialNum ||'--'}}<text class="copy" @click="copyPaymentSerial">复制</text></view>
                </view>
                <view class="order_list">
                    <view class="order_label">备注信息</view>
                    <view class="info">{{ orderDetails?.remark || '无' }}</view>
                </view>
                <template class="more" #more>
                    <view class="more_i" v-if="!orderCollapseRoot">查看更多<uni-icons type="down" size="18"></uni-icons></view>
                    <view class="more_i" v-else>点击收起<uni-icons type="up" size="18"></uni-icons></view>
                </template>
            </wd-collapse>
           <!-- </scroll-view> -->
            <!-- 待支付按钮组 -->
            <view class="pay_btns" v-if="isPendingPayment">
                <view class="cancel" @click="handCancelOrder">
                    <i class="iconfont icon-quxiaodingdan"></i>
                    取消订单
                </view>
                <view class="price_btn">
                    <view class="price_info">
                        <view class="text">合计：<text class="txt">实付款￥</text><text class="num">{{payAmount}}</text> </view>
                        <view class="price_m">
                            共减￥{{ orderDetails?.discountAmount?.toFixed(2) }}
                        </view>  
                    </view>
                    <button class="pay_btn" @click="handPayOrder">立即支付</button>  
                </view>
            </view>
            <!-- 待使用按钮组 -->
            <view class="btns" v-if="useAndconfirm">
                <button class="btn" @click="requestRefund">申请退款</button>
                <button class="btn">再次预定</button>
            </view>     
            <!-- 已完成按钮组 -->
            <!-- <view class="finished_btns" v-if="finished"> -->
            <view class="finished_btns">
                <i class="iconfont icon-kefu"></i>
                <button class="f_btn">申请开票</button>
                <button class="f_btn" @click="requestRefund">申请退款</button>
                <button class="f_btn">再次购买</button>
            </view>     
        </view>
          
    </view>
</template>

<script lang="ts" setup>
import {ref ,computed, onMounted} from "vue";
import HeaderBar from "@/components/HeaderBar/index.vue";
import { queryAgencyOrder , queryMerchant ,cancelOrder} from "@/premiumRouteSubPack/api/index"
import {onLoad} from "@dcloudio/uni-app";

// const id = ref()   //订单号
const status = ref(0)   //订单状态
const createTime = ref();     // 后端返回的订单创建时间

const statusList =ref([
    {status:0,label:'待支付'},
    {status:5,label:'已取消'},
    {status:6,label:'已完成'},
    {status:9,label:'待确认'},
    {status:13,label:'已退款'},
    {status:22,label:'待使用'}
])

const merchantObj = ref({})   //商户信息
const merchantId = ref()   //商户Id
const orderDetails = ref()    //订单详情
const goodsInfo = ref({})    //商品信息
const collapseRoot = ref()  //人员信息展开状态
const orderCollapseRoot = ref()  //订单信息展开状态

// 计算属性转换状态码
const statusLabel = computed(() => {
    const found = statusList.value.find(item => item.status === status.value);
    return found ? found.label : '未知状态';
});
//根据状态展示图标
const statusIcon = computed(() => {
    return [0,4].includes(status.value) ? 'check-circle' : 'chart-pie';
});
// 显示条件计算属性
const shouldShowTips = computed(() => {
    return [0, 1, 2, 4].includes(status.value);
});
const isRefunded = computed(() => status.value === 13);
const isPendingPayment = computed(() => status.value === 0);  //待支付状态
const showRefundDetail = computed(() => [6, 13, 22].includes(status.value));
const useAndconfirm = computed(() => [ 9, 22].includes(status.value));  //待使用&待确认
const finished = computed(() => status.value === 6);        //已完成状态


const remainingTime = ref(0)  //剩余支付时间
let timer: number

// 计算剩余时间
const calculateRemaining = () => {
  const createTimestamp = new Date(Date.parse(createTime.value)).getTime();
  const endTimestamp = createTimestamp + 15 * 60 * 1000
  const now = Date.now()
  
  // 返回剩余时间（最低为0）
  return Math.max(endTimestamp - now, 0)
}
const travelerTypes = computed(() => [
    { label: '成人', value: 0 },
    { label: '儿童', value: 1 }
]);

const refundStatusMap = {
    0: '退款成功',
    1: '退款中',
};

// const filteredTravelers = (type: number) => {
//     return goodsInfo.value?.travelersInformations?.filter((item: any) => item.type === type) || [];
// };

// const adultCount = computed(() => 
//     goodsInfo.value?.travelersInformations?.filter((item: any) => item.type === 0).length || 0
// );

// const childrenCount = computed(() => 
//     goodsInfo.value?.travelersInformations?.filter((item: any) => item.type === 1).length || 0
// );
const adultCount = computed(() => goodsInfo.value?.adultTravelers?.length || 0);
const childrenCount = computed(() => goodsInfo.value?.childrenTravelers?.length || 0);
// 修改支付金额计算
const payAmount = computed(() => orderDetails.value?.payAmount?.toFixed(2) || '0.00');
onLoad((option) => {
    // 获取页面跳转时传递的参数
    const id = option.id;
    // // 调用后端接口
    getOrderDetail(id);
});
onMounted(() => {
    
})
//获取订单详情
const loading = ref(false);
const error = ref<Error | null>(null);

const getOrderDetail = async (orderId: string) => {
  loading.value = true;
  try {
    const res = await queryAgencyOrder(orderId);
    const {result} = res;
    Object.assign(goodsInfo.value, result.myOrderClient);
    status.value = result.status;
    createTime.value = result.myOrderClient.createTime;
    merchantId.value = result.merchantId;
    orderDetails.value = result;
    goodsInfo.value = result.myOrderClient
    getMerchant(merchantId)
    if (status.value === 0) {
      startCountdown();
    }
  } catch (err) {
    error.value = err as Error;
    uni.showToast({
      title: "加载订单失败",
      icon: "none",
      duration: 2000
    });
  } finally {
    loading.value = false;
  }
};
const startCountdown = () => {
  stopCountdown();
  
  const update = async () => {
    const time = calculateRemaining();
    remainingTime.value = time;
    
    if (time <= 0) {
      stopCountdown();
      await refreshOrderDetail();
    }
  };

  update();
  timer = setInterval(update, 1000);
};

const stopCountdown = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};
// 刷新方法
const refreshOrderDetail = async () => {
  if (!orderDetails.value?.id) return;
  
  try {
    const res = await queryAgencyOrder(orderDetails.value.id);
    const {result} = res;
    Object.assign(orderDetails.value, result);
    status.value = result.status;
    
    if (status.value === 0) {
      createTime.value = result.myOrderClient.createTime;
      startCountdown();
    }
  } catch (err) {
    console.error("刷新订单失败:", err);
  }
};
//获取商户信息
const getMerchant =(merchantId)=>{
    queryMerchant(merchantId.value).then((res)=>{
        const { result } = res;
        merchantObj.value = result
    })
}
const handleChange =()=>{
    console.log('展开面板11111');
    
}
const orderHandleChange =()=>{
    console.log('展开面板11111');
    
}
const maskIdCard =(idCard)=> {
    if (!idCard) return '';
    return idCard.replace(/(?<=.{6}).(?=.{4})/g, '*');
}
const toggleShowIdCard =(item)=> {
    item.showFull= !item.showFull;
}
//复制订单号&支付流水号
const copyOrderNumber = () => handleCopy(orderDetails.value?.id, "订单号");
const copyPaymentSerial = () => handleCopy(orderDetails.value?.paySerialNum, "支付流水号");
const handleCopy = (data: string, successMsg: string) => {
    if (!data) {
        uni.showToast({ title: `${successMsg}不存在`, icon: "none" });
        return;
    }
    uni.setClipboardData({
        data,
        success: () => uni.showToast({ title: `${successMsg}已复制`, icon: "success" }),
        fail: (error) => {
            console.error("复制失败:", error);
            uni.showToast({ title: "复制失败", icon: "none" });
        }
    });
}
//取消订单
const handCancelOrder =()=>{
    uni.showModal({
        title: '确认取消',
        content: '确定要取消该订单吗？',
        showCancel: true,
        success: (res) => {
            if (res.confirm) {
                cancelOrder({orderId:orderDetails.value.id}).then(() => {
                uni.showToast({
                    title: '删除成功',
                    icon: 'success',
                    duration: 1500
                });
                refreshOrderDetail(); // 刷新订单列表
            }).catch((err) => {
                uni.showToast({
                    title: '取消失败',
                    icon: 'none',
                    duration: 1500
                });
                console.error('Error deleting data:', err);
            });
            }
        }
    });
    
}
//支付
const handPayOrder =()=>{
    console.log('点击支付');
    
}
//申请退款
const requestRefund = () => {
  if (!orderDetails.value || !goodsInfo.value) {
    uni.showToast({ title: '订单数据未加载完成', icon: 'none' });
    return;
  }
  const refundData = {
    orderId: orderDetails.value.id,
    productInfo: {
      id: goodsInfo.value.id,
      name: goodsInfo.value.productInformation?.thaliName || '',
      desc: goodsInfo.value.productInformation?.thaliMemo || '',
      quantity: goodsInfo.value.productInformation?.buyNum || 0,
      adultPrice: goodsInfo.value.productInformation?.adultPrice || 0,
      childrenPrice: goodsInfo.value.productInformation?.childrenPrice || 0,
      adultNum: goodsInfo.value.productInformation?.adultNum || 0,
      childrenNum: goodsInfo.value.productInformation?.childrenNum || 0,
      totalAmount: orderDetails.value.payAmount || 0,
      useDate: orderDetails.value.useDate || 0,
      headImgUrl:goodsInfo.value.headImgUrl||'',
    },
    travelers: {
      adults: goodsInfo.value.adultTravelers?.map(t => ({
        id: t.id,
        name: t.name,
        idCard: t.idCard,
        refundStatus: t.refundStatus
      })) || [],
      children: goodsInfo.value.childrenTravelers?.map(t => ({
        id: t.id,
        name: t.name,
        idCard: t.idCard,
        refundStatus: t.refundStatus
      })) || []
    }
  };
  uni.navigateTo({
    url: `/premiumRouteSubPack/pages/refund/index?data=${encodeURIComponent(JSON.stringify(refundData))}`
  });
};
//查看退款详情
const toRefundDetail =()=>{
    const dataInfo = {
        id:orderDetails.value.id,
        headImgUrl:goodsInfo.value.headImgUrl||'',
        useDate: orderDetails.value.useDate || 0,
    }
    uni.navigateTo({
        // url:`/premiumRouteSubPack/pages/refundDetail/index?id=${id}`
        url:`/premiumRouteSubPack/pages/refundList/index?data=${encodeURIComponent(JSON.stringify(dataInfo))}`
    })
}
//进入店铺
const enterStore =()=>{
    const id =  merchantObj.value.id
    const url = `/premiumRouteSubPack/pages/merchant/index?id=${id}&merchantId=${id}`;
    uni.navigateTo({
        url: url
    });
}
//联系我们
const handleCallPhone = () => {
    uni.makePhoneCall({
      phoneNumber: merchantObj.value.contactMobile
    })
};
onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})

</script>

<style lang="scss" scoped>
.page_main{
    background: #eeefe7;
    // height: 100vh;
    .container{
        padding: 40rpx 28rpx 280rpx;
        .header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #1B9C61;
            border-radius: 10rpx 10rpx 0 0;
            padding: 28rpx;
            color: #fff;
            .status{
                display: flex;
                align-items: center;
                font-size: 39rpx;
                :deep(.wd-icon){
                    margin-right: 20rpx;
                }
            }
            .header_r{
                display: flex;
                align-items: center;
                font-size: 25rpx;
                .tip{
                    margin-right: 10rpx;
                }
                .time{
                    font-size: 29rpx;
                    .remain{
                        display: flex;
                        align-items: center;
                    }
                    :deep(.wd-count-down){
                        color: #fff;
                    }
                }
                .refund_entry{
                    display: flex;
                    align-items: center;
                }
            }
        }
        .goods{
            padding: 44rpx 28rpx 40rpx;
            border-radius: 10rpx;
            margin-top: -10rpx;
            background: #fff;
            display: flex;
            align-items: center;
            .img{
                width: 125rpx;
                height: 125rpx;
                border-radius: 10rpx;
                margin-right: 27rpx;
            }
            .goods_info{
                flex: 1;
                .info{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 25rpx;
                    font-weight: bold;
                    color: #2b2b24;
                    margin-bottom: 15rpx;
                }
                .count{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 22rpx;
                    color: #777777;
                }
                .memo{
                    font-size: 22rpx;
                    color: #777777;
                    width: 400rpx;
                    white-space: nowrap; 
                    overflow: hidden;  
                    text-overflow: ellipsis;
                }
                .date{
                    font-size: 22rpx;
                    color: #777777;
                }
            }
        }
        .merchant{
            padding:28rpx 28rpx 18rpx;
            background: #fff;
            border-radius: 10rpx;
            margin-top: 27rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .merchant_info{
                .title{
                    font-size: 29rpx;
                    font-weight: bold;
                }
                .text{
                    font-size: 25rpx;
                    margin: 20rpx 0;
                }
                .tag{
                    padding: 7rpx 16rpx;
                    border:1rpx solid #1B9C61;
                    border-radius: 10rpx;
                    font-size: 25rpx;
                    color: #1B9C61;
                    display: inline-block;
                }
            }
            .contact{
                display: flex;
                align-items: center;
                .item{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    white-space: nowrap;
                    font-size: 25rpx; 
                    margin-left: 30rpx;
                }
            }
        }
        .price_breakdown{
            margin-top: 27rpx;
            padding: 34rpx 28rpx 26rpx;
            background: #fff;
            border-radius: 10rpx;
            .title{
                font-size: 29rpx;
                font-weight: bold;
            }
            .item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 25rpx;
                .label{
                    display: flex;
                    align-items: center;
                    font-size: 25rpx;
                    .count{
                        margin-left: 15rpx;
                        color: #777;
                    }
                }
                .price{
                    font-size: 22rpx;
                    text{
                        font-weight: bold;
                    }
                }
                .price_m{
                    color: #D33700 ;
                }
            }
        }
        :deep(.wd-collapse){
            margin-top: 27rpx;
            border-radius: 10rpx;
            .title{
                font-size: 29rpx;
                font-weight: bold;
            }
            .list{
                position: relative;
                padding-left: 80rpx;
                margin-top: 42rpx;
                .label{
                    position: absolute;
                    left: 0;
                    top:0;
                    font-size: 29rpx;
                    font-weight: bold;
                }
                .info{
                    font-size: 25rpx;
                    .item{
                        margin-top: 35rpx;
                        .text{
                            margin-top: 10rpx;
                            .tag{
                                padding: 1rpx 8rpx;
                                background: #EFEFED;
                                border-radius: 7rpx;
                                color: #1B9C61;
                                margin-left: 20rpx;
                                font-size: 22rpx;
                            }
                        }
                    }
                }
            }
            .tel{
                padding-left: 140rpx;
            }
            .order_list{
                position: relative;
                margin-top: 20rpx;
                font-size: 29rpx;
                .order_label{
                    position: absolute;
                    // left: 0;
                    // top:0;
                }
                .info{
                    text-align: right;
                    padding-left: 180rpx;
                    .copy{
                        padding: 1rpx 8rpx;
                        color: #fff;
                        background: #1B9C61;
                        border-radius: 8rpx;
                        margin-left: 5rpx;
                    }
                }
            }
            .more-slot {
                border-top: 1px solid #c0c2b3;
                width: calc(750rpx - 28rpx*4);
                padding-top: 20rpx;
                margin-top: 20rpx;
                .more_i{
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #2b2b24;
                }
            }
        }
        .pay_btns{
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 28rpx;
            padding-bottom: env(safe-area-inset-bottom);
            border: 1rpx solid #C0C2B3;;
            background: #fff;
            box-sizing: border-box;
            .cancel{
                text-align: center;
                font-size: 25rpx;
                .icon-quxiaodingdan {
                    font-size: 48rpx;
                    color: #000000;
                    margin-bottom: 12rpx;
              }
            }
            .price_btn{
                display: flex;
                align-items: center;
                .price_info{
                    text-align: right;
                    margin-right: 15rpx;
                    font-size: 25rpx;
                    .text{
                        font-weight: bold;
                        .txt{
                            font-weight: normal;
                        }
                        .num{
                            font-size: 34rpx;
                        }
                    }
                    .price_m{
                        margin-top: 10rpx;
                        color: #D33700;
                    }
                }
                .pay_btn{
                    width: 222rpx;
                    height: 84rpx;
                    background: #1B9C61;
                    border-radius: 10rpx;
                    color: #fff;
                    font-size: 29rpx;
                    line-height: 84rpx;
                    font-weight: bold;
                }
            }
        }
        .btns{
            margin-top: 90rpx;
            display: flex;
            align-items: center;
            .btn{
                flex: 1;
                height: 84rpx;
                line-height: 84rpx;
                background: #fff;
                border-radius: 10rpx;
                font-size: 30rpx;
                font-weight: bold;
                &:nth-child(2){
                    margin-left: 28rpx;
                    color: #fff;
                    background: #1B9C61;
                }
            }
        }
        .finished_btns{
            margin-top: 90rpx;
            display: flex;
            align-items: center;
            .icon-kefu{
                font-size: 48rpx;
            }
            .f_btn{
                margin-left: 28rpx;
                height: 84rpx;
                line-height: 84rpx;
                background: #fff;
                border-radius: 10rpx;
                font-size: 30rpx;
                font-weight: bold;
                &:nth-child(4){
                    color: #fff;
                    background: #1B9C61;
                }
            }
        }
        
    }
}
</style>